<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/login.css}" media="screen and (min-width: 1024px)">
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
</head>
<body>
<form action="/user/login">
    <div style="width: 100%;display: flex;justify-content: center;margin-top: 150px">
        <img th:src="@{/img/icon.png}" width="72px;" height="72px">
    </div>
    <div class="box" style="margin-top: 20px">
        <span id="msg">欢迎登陆</span>
        <input class="input" id="userAccount" type="text" placeholder="账号" value="fish"/>
        <input class="input" id="userPsw" type="password" placeholder="密码" value="123456"/>
        <button class="btn" id="login" type="button" value="登录">立即登录</button>
    </div>
</form>
</body>
<script>
    $(function () {
        $('#userAccount').focus(function () {
            $('#msg').html("请继续输入")
        }).blur(function () {
            if ($('#userAccount').val().length == 0) {
                $('#msg').html("<font color='red'><b>学号不能为空</b></font>");
                return false;
            } else {
                $.ajax({
                    url: '/user/ifAccount',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        "account": $('#userAccount').val()
                    },
                    success: function (res) {
                        if (res) {
                            $('#msg').html("请继续输入");
                            $('#userAccount').css({
                                border: "1px solid #e3f2fd",
                                boxShadow: "none"
                            });
                            $("#login").removeAttr("disabled");
                        } else {
                            $('#userAccount').css({
                                border: "1px solid red",
                                boxShadow: "0 0 2px red"
                            });
                            $("#login").attr("disabled", "true");
                            $('#msg').focus().html("<font color='red'><b>不存在该账号</b></font>");
                        }
                    }
                })
            }
        })

        $('#login').click(function () {
            if ($('#userAccount').val().length == 0) {
                $('#userAccount').focus().css({
                    border: "1px solid red",
                    boxShadow: "0 0 2px red"
                });
                $('#msg').html("<font color='red'><b>学号不能为空</b></font>");
                return false;
            } else {
                $('#userAccount').css({
                    border: "1px solid #e3f2fd",
                    boxShadow: "none"
                });
            }
            if ($('#userPsw').val().length == 0) {
                $('#userPsw').focus().css({
                    border: "1px solid red",
                    boxShadow: "0 0 2px red"
                });
                $('#msg').html("<font color='red'><b>密码不能为空</b></font>");
                return false;
            } else {
                $('#userPsw').css({
                    border: "1px solid #e3f2fd",
                    boxShadow: "none"
                });
            }

            $.ajax({
                url: '/user/login',
                type: 'GET',
                dataType: 'json',
                data: {
                    "account": $('#userAccount').val(),
                    "password": $('#userPsw').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        window.location.href = "/hello/index"
                    } else if (res.code == 500100) {
                        $('#userAccount').focus();
                        $('#msg').html("<font color='red'><b>该账号已经被注销</b></font>");
                        $('#userPsw').val("");
                    } else {
                        $('#userPsw').focus();
                        $('#msg').html("<font color='red'><b>你的账号或密码有误</b></font>");
                        $('#userPsw').val("");
                    }
                }
            })
        })
    })
</script>
</html>